<template>
  <view>
    <view
      style="height: 400upx;background-image: url(../../static/gerenzhongxin04.jpg);text-align: center;display: flex;position: relative;">
      <view style="height: 60upx;line-height: 60upx;font-size: 38upx;color: #ffffff;flex: 1;margin-top: 60upx;">
        <view style="display: flex;">
          <view style="flex: 1;margin-left: 30upx;">
            <image src="../../static/shezhi.png" style="width: 60upx;height: 60upx;" @click="jump"
              data-src="../commission/qrcode/qrcode"></image>
          </view>
          <view style="flex: 1;">
            <image src="../../static/kefu_ico.png" style="width: 60upx;height: 60upx;" @click="jump"
              data-src="../commission/qrcode/customer"></image>
          </view>
        </view>
        <!-- <view style="margin-top: 170upx;">
					<image src="../../static/qiandaoicon.png" style="width: 80upx;height: 80upx;" @click="jump" data-src="sign/sign"></image>
				</view> -->
      </view>
      <!-- 昵称 -->
      <view style="height: 60upx;line-height: 60upx;font-size: 38upx;color: #ffffff;flex: 2;">
        <view style="margin-top: 80upx;">
          <image :src="res.avatar" style="width: 128upx;height: 128upx;border-radius:50%;border:4upx solid #fff;"
            mode=""></image>
        </view>
        <view class="name">{{res.nickname}}</view>
        <view class="lv">
          <text v-cloak>我的邀请码：{{res.yqm}}</text>
        </view>
      </view>
      <view style="height: 60upx;line-height: 60upx;font-size: 38upx;color: #ffffff;flex: 1;margin-top: 60upx;">
        <view class="">

        </view>
      </view>
    </view>

    <view class="short_all" style="margin-top: -120upx;">
      <view class="nav">
        <view class="top">
          <view class="uni-list">
            <view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../order/order?index=0">
              <view class="uni-list-cell-navigate uni-navigate-right">
                <image src="../../static/order4.png" mode=""></image>
                <text class="text" style="color: #888;font-size: 32upx;font-weight: 550;">全部订单</text>
                <text class="right">查看全部订单</text>
              </view>
            </view>
          </view>
        </view>
        <view class="cont clear">
          <view class="list" v-for="(item,index) in order" :key="index" @click="jump" :data-src="item.src">
            <image :src="item.icon" mode=""></image>
            <text v-cloak>{{item.text}}</text>
            <uni-badge :text="item.badge" type="danger" v-if="item.badge > 0"></uni-badge>
          </view>
        </view>
      </view>
      <!-- 横向flex图文数据列表 -->
      <!-- <view style="display: flex;background-color: #FFFFFF;">
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:4upx solid #eeeeee;" @click="jump" data-src="./details/a_kzp">
					<image src="../../static/jifen_1.png" style="width: 80upx;height: 70upx;margin-top: 30upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">可提现收益</view>
					<view style="">{{res.a_kzp}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:4upx solid #eeeeee;" @click="jump" data-src="./details/credit">
					<image src="../../static/jifen.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">积分值</view>
					<view style="">{{res.credit1}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:3upx solid #eeeeee;" @click="jump" data-src="./details/bz">
					<image src="../../static/bz.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">币值</view>
					<view style="">{{res.bz}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;" @click="jump" data-src="./details/tzz">
					<image src="../../static/zhengquan.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">通证值</view>
					<view style="">{{res.tzz}}</view>
				</view>
			</view> -->

      <view class="list">
        <view class="uni-list bottom_">
          <view class="uni-list-cell" :hover-class="active" @click="jumpno" data-src="../gift_income/gift">
            <view class="uni-list-cell-navigate uni-navigate-right">
              <image src="../../static/jilu.png" mode="" style="visibility: hidden;"></image>
              <text class="text" style="font-size: 32upx;font-weight: 555;margin-left: -46upx;">我的钱包</text>
              <text style="color: #999;font-size: 24upx;padding-right: 20upx;margin-bottom: 6upx;">查看详情</text>
            </view>
          </view>
          <view class="uni-list-cell" :hover-class="active">
            <view style="display: flex;width: 90%;margin: 20upx 5%;">
              <view style="flex: 1;" @click="jump" data-src="./details/a_kzp">
                <view style="font-size: 30upx;color: #FF0000;font-weight: 555;">{{res.a_kzp}}</view>
                <view class="e-b" style="color: #999;font-size: 22upx;">可提现收益(元)</view>
              </view>
              <view style="flex: 1;" @click="jump" data-src="./details/credit">
                <view style="font-size: 30upx;font-weight: 555;">{{res.credit1}}</view>
                <view class="e-b" style="color: #999;font-size: 22upx;">积分值</view>
              </view>
            </view>
          </view>
          <view class="uni-list-cell" :hover-class="active">
            <view style="display: flex;width: 90%;margin: 20upx 5%;">
              <view style="flex: 1;" @click="jump" data-src="./details/bz">
                <view style="font-size: 30upx;font-weight: 555;">{{res.bz}}</view>
                <view class="e-b" style="color: #999;font-size: 22upx;">币值</view>
              </view>
              <view style="flex: 1;" @click="jump" data-src="./details/tzz">
                <view style="font-size: 30upx;font-weight: 555;">{{res.tzz}}</view>
                <view class="e-b" style="color: #999;font-size: 22upx;">通证值</view>
              </view>
              <view style="flex: 1;">
                <view style="font-size: 30upx;font-weight: 555;">{{res.credit2}}</view>
                <view class="e-b" style="color: #999;font-size: 22upx;">余额</view>
              </view>
              <!-- <view style="flex: 1;">
								<view style="font-size: 30upx;font-weight: 555;">{{res.giftdata.libao_jicha}}</view>
								<view class="e-b" style="color: #999;font-size: 22upx;">礼包奖励</view>
							</view> -->
            </view>
          </view>
        </view>
      </view>
      <!-- 广告 -->
      <!-- <view>
				<image src="../../static/gerenzhongxin_1.png" class="img_1" @click="jumpto" style="border-radius: 80upx;"></image>
			</view> -->
      <!-- 收入来源 -->
      <!-- <view class="list flexfather">
				<view class="uni-list" style="display: inline-block;text-align: center;">
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../member/acommsion/acommsion" style="display: inline-block;">
						<view class="uni-list-cell-navigate ">
						<image src="../../static/shouru.png" mode="" style="margin-right:10px;" class="img_11"></image>
						<text style="font-size: 25upx;font-weight:550">业务收入</text>
						</view>
					</view>
				</view>
				<view class="uni-list" style="display: inline-block;text-align: center;">
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../gift_income/gift" style="display: inline-block;">
						<view class="uni-list-cell-navigate ">
						<image src="../../static/shouru.png" mode="" style="margin-right:10px;" class="img_22"></image>
						<text style="font-size: 25upx;font-weight:550">礼包收入</text>
						</view>
					</view>
				</view>
				<view class="uni-list" style="display: inline-block;text-align: center;">
					<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../ally_income/ally_income" style="display: inline-block;">
						<view class="uni-list-cell-navigate ">
						<image src="../../static/shouru.png" mode="" style="margin-right:10px;" class="img_22"></image>
						<text style="font-size: 25upx;font-weight:550">商盟收入</text>
						</view>
					</view>
				</view>
			</view> -->
      <view class="list">
        <view class="uni-list">
          <view class="uni-list-cell" :hover-class="active" @click="jumpcart" data-src="/cart/cart">
            <view class="uni-list-cell-navigate uni-navigate-right">
              <image src="../../static/order.png" mode=""></image>
              <text class="text">我的购物车</text>
            </view>
          </view>
          <view class="uni-list-cell" :hover-class="active" @click="jump" data-src="./getdetails/getdetails">
            <view class="uni-list-cell-navigate uni-navigate-right">
              <image src="../../static/shouyi-1.png" mode=""></image>
              <text class="text">我的收益</text>
            </view>
          </view>
        </view>
        <view class="uni-list">
          <!-- <view class="uni-list-cell" :hover-class="active" @click="jump" data-src="favorite">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<image src="../../static/love_fill.png" mode=""></image>
							<text class="text">我的关注</text>
							<uni-badge :text="res.favorite" type="danger" v-if="res.favorite > 0"></uni-badge>
						</view>
					</view> -->
          <view class="uni-list-cell" :hover-class="active" @click="jump" data-src="history">
            <view class="uni-list-cell-navigate uni-navigate-right">
              <image src="../../static/foot.png" mode=""></image>
              <text class="text">我的足迹</text>
            </view>
          </view>
          <view class="uni-list-cell" :hover-class="active" @click="jump" data-src="sign/sign">
            <view class="uni-list-cell-navigate uni-navigate-right">
              <image src="../../static/addr.png" mode=""></image>
              <text class="text">积分签到</text>
            </view>
          </view>
        </view>
      </view>

      <view class="history-section icon" style="overflow: hidden;">
        <view class="sec-header">
          <text class="yticon icon-lishijilu"></text>
          <text>浏览历史</text>
        </view>
        <scroll-view scroll-x class="h-list">
          <view v-for="img in data" style="display: inline-block;">
            <image @click="jumpgoods(img.goodsid)" :src="img.thumb" mode="aspectFill"></image>
            <!-- <image @click="navTo('/goods/detail?goodsid=' + img.goodsid)" :src="img.thumb" mode="aspectFill"></image> -->
          </view>
        </scroll-view>
      </view>

      <view>
        <view
          style="display: flex;margin: 20upx auto 0;border-radius: 10upx 10upx 0 0;overflow: hidden;background-color: #ffffff;border-bottom: 2upx solid #EEEEEE;">
          <view style="flex: 1;width: 100%;height: 155upx;border-right: 2upx solid #eeeeee;" @click="jump"
            data-src="favorite">
            <image src="../../static/guanzhu.png" mode=""
              style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
            <view style="text-align: center;margin-top: -26upx;">
              我的关注
            </view>
          </view>
          <view style="flex: 1;width: 100%;height: 155upx;" @click="jump" data-src="./address/address">
            <image src="../../static/dizhi.png" mode=""
              style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
            <view style="text-align: center;margin-top: -26upx;">
              地址管理
            </view>
          </view>
          <view style="flex: 1;width: 100%;height: 155upx;border-left: 2upx solid #eeeeee;" @click="jump"
            data-src="../commission/qrcode/invite_code">
            <image src="../../static/haibao.png" mode=""
              style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
            <view style="text-align: center;margin-top: -26upx;">
              专属海报
            </view>
          </view>
        </view>
        <view
          style="display: flex;margin: 0upx auto 20upx;border-radius: 0 0 10upx 10upx;overflow: hidden;background-color: #ffffff;">
          <view style="flex: 1;width: 100%;height: 155upx;border-right: 2upx solid #eeeeee;" @click="jump"
            data-src="./info/info">
            <image src="../../static/ziliao.png" mode=""
              style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
            <view style="text-align: center;margin-top: -26upx;">
              会员资料
            </view>
          </view>
          <view style="flex: 1;width: 100%;height: 155upx;" @click="jump" data-src="../member/bankcard/bankcard">
            <image src="../../static/fankui.png" mode=""
              style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
            <view style="text-align: center;margin-top: -26upx;">
              银行卡绑定
            </view>
          </view>
          <view style="flex: 1;width: 100%;height: 155upx;border-left: 2upx solid #eeeeee;" @click="jump"
            data-src="verified/verified">
            <image src="../../static/dingdan.png" mode=""
              style="width: 100upx;height: 100upx;margin-top: 10upx;margin-left: 76upx;"></image>
            <view style="text-align: center;margin-top: -26upx;">
              实名认证
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
  import uniBadge from "../../components/uni-badge.vue";
  export default {
    data() {
      return {
        res: [],
        order: [{
          text: '待付款',
          icon: '../../static/order0.png',
          src: '../order/order?index=1',
          badge: 0
        }, {
          text: '待发货',
          icon: '../../static/order1.png',
          src: '../order/order?index=2',
          badge: 0
        }, {
          text: '待收货',
          icon: '../../static/order2.png',
          src: '../order/order?index=3',
          badge: 0
        }, {
          text: '已完成',
          icon: '../../static/order3.png',
          src: '../order/order?index=4',
          badge: 0
        }],
        is_realname: '',
        active: "active",
        openid: '',
        data: [],
      };
    },
    components: {
      uniBadge
    },
    onLoad: function() {
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    onNavigationBarButtonTap: function(e) {
      uni.navigateTo({
        url: 'info/info'
      });
    },
    methods: {
      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            console.log(res)
            uni.hideLoading()
            this.res = res.data
            this.is_realname = res.data.is_realname
            var order = this.order
            for (var i in order) {
              this.order[i].badge = res.data.order[i]
            }
          },
          fail: () => {},
          complete: () => {}
        });
        // 浏览历史
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.history.get_list&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            this.data = res.data.result.list
            // console.log(this.data)
            uni.hideLoading()
          },
          fail: () => {},
          complete: () => {}
        });
      },
      jump(e) {
        uni.navigateTo({
          url: e.currentTarget.dataset.src
        });
      },
      jumpno() {
        uni.showModal({
          title: '提示',
          content: '功能即将开放',
          showCancel: false,
          confirmColor: "#DD524D",
          success() {
            return
          }
        })
      },
      jumptab(e) {
        uni.switchTab({
          url: e.currentTarget.dataset.src
        })
      },
      jumpcart(e) {
        // console.log('/pages'+e.currentTarget.dataset.src);return;
        uni.navigateTo({
          url: '/pages/cart/cart'
        });
      },
      jumpto() {
        uni.navigateTo({
          url: '/pages/commission/qrcode/invite_code'
        })
      },
      setup() {
        uni.navigateTo({
          url: './info/info'
        });
      }
    }
  }
</script>

<style lang="scss">
  .bottom_ {
    margin-bottom: 18upx;
  }

  .short_all {
    width: 95%;
    margin: 0 auto;
  }

  .flexfather {
    display: flex;
  }

  .flexfather view {
    flex: 1;

  }

  .imgbgc {
    width: 100%;
    height: 400upx;
    border-radius: 0 0 300upx 300upx/0 0 36upx 36upx;
    background-size: cover;
    opacity: 0.80;
  }

  .img_1 {
    width: 100%;
    height: 200upx;
    margin-top: 20upx;
  }

  .img_11 {
    width: 150upx;
    height: 150upx;
  }

  * {
    box-sizing: border-box;
  }

  .btn {
    padding: 20upx 24upx;
  }

  .btn button {
    margin: 20upx 0;
    font-size: 28upx;
    padding: 8upx;
  }

  .btn .changePwd {
    background: #fff;
    border: 2upx solid #175e3c;
    color: #175e3c;
  }

  .btn .logout {
    border-color: #175e3c;
    background-image: linear-gradient(to bottom, rgb(243, 109, 31), rgb(252, 9, 9));
    color: #fff;
    margin-bottom: -40upx;
  }

  .btn .logout_1 {
    border-color: #175e3c;
    background-image: linear-gradient(to bottom, rgb(243, 109, 31), rgb(252, 9, 9));
    color: #fff;
  }

  .headinfo {
    height: 290upx;
    overflow: hidden;
    position: relative;
    z-index: 10;
  }

  .headinfo>image {
    position: absolute;
    width: 750upx;
    height: 290upx;
  }

  .headinfo .info {
    padding: 80upx 40upx 0;
    position: relative;
    z-index: 1;
  }

  .headinfo .info .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 750upx;
    padding: 20upx 10upx;
    z-index: 1;
  }

  .headinfo .info .top image {
    width: 34upx;
    height: 34upx;
    float: right;
    margin-right: 20upx;
  }

  .headinfo .info .userinfo .webkit image {
    width: 128upx;
    height: 128upx;
    border-radius: 50%;
    border: 4upx solid #fff;
    margin-right: 24upx;
  }

  .headinfo .info .userinfo .webkit .flex .name {
    height: 50upx;
    color: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    font-size: 40upx;
    line-height: 40upx;
    color: #fff;
    margin-bottom: 6upx;
    /* padding-top:10upx;*/
  }

  .headinfo .info .userinfo .webkit .flex .lv text {
    display: block;
    line-height: 36upx;
    font-size: 24upx;
    color: #fff;
  }

  .headinfo .kefu {
    height: 110upx;
    width: 170upx;
    position: absolute;
    right: -4upx;
    bottom: -8upx;
    transform: rotate(8deg);
  }

  .uni-list-cell.active {
    background: #f5f5f5;
  }

  .uni-list image {
    width: 40upx;
    height: 40upx;
  }

  .uni-list .text {
    position: absolute;
    left: 84upx;
    font-size: 30upx;
    color: #444;
  }

  .uni-list {
    margin-top: 20upx;
    border-radius: 15upx;
  }

  .uni-list:before,
  .uni-list:after {
    display: none;
  }

  .uni-list-cell:after {
    content: " ";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -1px;
    height: 1px;
    border-top: 1px solid #ebebeb;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background: none;
  }

  .uni-list-cell .right {
    font-size: 24upx;
    color: #999;
    margin-right: 20upx;
  }

  .uni-list .uni-list-cell:last-child:after {
    border: 0;
  }

  .uni-list .uni-badge {
    margin-right: 15px;
    background-color: #f55;
  }

  .nav {
    padding-top: 40upx;
    background: #fff;
    margin-top: -40upx;
  }

  .nav .top {
    border-bottom: 1px solid #f5f5f5;
  }

  .nav .top .uni-list {
    margin: 0;
  }

  .nav .cont {
    background: #fff;
  }

  .nav .cont .list {
    float: left;
    width: 25%;
    padding: 28upx 0;
    position: relative;
  }

  .nav .cont .list image {
    width: 50upx;
    height: 50upx;
    margin: 0 auto;
    display: block;
  }

  .nav .cont .list text {
    text-align: center;
    display: block;
    font-size: 26upx;
    margin-top: 10upx;
  }

  .nav .uni-badge {
    position: absolute;
    top: 4upx;
    right: 40upx;
    background: #f55;
  }

  .xvqian {
    display: unset;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 5px;
    color: #fff;
    margin-left: 5px;
  }

  .history-section {
    padding: 30upx 0 0;
    margin-top: 20upx;
    background: #fff;
    border-radius: 10upx;

    .sec-header {
      display: flex;
      align-items: center;
      // font-size: $font-base;
      // color: $font-color-dark;
      line-height: 40upx;
      margin-left: 30upx;

      .yticon {
        font-size: 44upx;
        color: #5eba8f;
        margin-right: 16upx;
        line-height: 40upx;
      }
    }

    .h-list {
      white-space: nowrap;
      padding: 30upx 30upx 0;

      image {
        display: inline-block;
        width: 160upx;
        height: 160upx;
        margin-right: 20upx;
        border-radius: 10upx;
      }
    }
  }
</style>
